<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="lcy">
    <script src="jquery-3.1.1.js"></script>
    <title></title>
    <style>
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .container {
            width: 768px;
            border: 1px solid #ccc;
        }
        
        li {
            border-bottom: 1px dashed #dfdfdf;
            /*font-size: 14px;*/
            overflow: hidden;
        }
        
        li:last-child {
            border: none;
        }
        
        li .intro {
            float: left;
            width: 668px;
            /*line-height: 25px;*/
            padding-top: 12px;
        }
        
        li .name {
            float: left;
            width: 100px;
            height: 25px;
            text-align: right;
            /*line-height: 25px;*/
            padding-top: 12px;
            font-weight: bold;
            cursor: pointer;
        }
        
        li .intro a {
            text-decoration: none;
            display: inline-block;
            padding: 0 5px;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        /*选中时的样式*/
        
        li .intro a.selected,
        li .intro a:hover {
            background-color: #f63;
            color: white;
        }
        
        .choose .intro span {
            border: 1px solid #f63;
            padding: 0 5px;
            margin-right: 10px;
            margin-bottom: 10px;
            display: none;
        }
        
        li.choose .intro span em {
            font-style: normal;
            color: #ccc;
            font-weight: bold;
        }
        
        li.choose .intro span:hover em {
            color: #f63;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <!--(li>span.name{品牌：}+span.intro>a[javascript:;]*8)*6-->
            <li>
                <span class="name">品牌：</span>
                <span class="intro">
                    <a href="javascript:;">三星</a>
                    <a href="javascript:;">vivo</a>
                    <a href="javascript:;">华为</a>
                    <a href="javascript:;">小米</a>
                    <a href="javascript:;">努比亚</a>
                    <a href="javascript:;">三星</a>
                    <a href="javascript:;">vivo</a>
                    <a href="javascript:;">华为</a>
                    <a href="javascript:;">小米</a>
                    <a href="javascript:;">努比亚</a>
                    <a href="javascript:;">三星</a>
                    <a href="javascript:;">vivo</a>
                    <a href="javascript:;">华为</a>
                    <a href="javascript:;">小米</a>
                    <a href="javascript:;">努比亚</a>
                    <a href="javascript:;">三星</a>
                    <a href="javascript:;">vivo</a>
                    <a href="javascript:;">华为</a>
                    <a href="javascript:;">小米</a>
                    <a href="javascript:;">努比亚</a>
                    <a href="javascript:;">三星</a>
                    <a href="javascript:;">vivo</a>
                    <a href="javascript:;">华为</a>
                    <a href="javascript:;">小米</a>
                    <a href="javascript:;">努比亚</a>
                    <a href="javascript:;">三星</a>
                    <a href="javascript:;">vivo</a>
                    <a href="javascript:;">华为</a>
                    <a href="javascript:;">小米</a>
                    <a href="javascript:;">努比亚</a>
                </span>
            </li>
            <li>
                <span class="name">价格：</span>
                <span class="intro">
                    <a href="javascript:;">500-1000元</a>
                    <a href="javascript:;">1000-1500元</a>
                    <a href="javascript:;">1500-2000元</a>
                    <a href="javascript:;">2000-3000元</a>
                    <a href="javascript:;">3000-4000元</a>
                    <a href="javascript:;">4000-5000元</a>
                    <a href="javascript:;">5000元以上</a>
                </span>
            </li>
            <li>
                <span class="name">主屏尺寸：</span>
                <span class="intro">
                    <a href="javascript:;">6.5英寸以上</a>
                    <a href="javascript:;">5.5-6.0英寸</a>
                    <a href="javascript:;">5.0-5.5英寸</a>
                    <a href="javascript:;">4.5-5.0英寸</a>
                    <a href="javascript:;">4.0-5.0英寸</a>
                    <a href="javascript:;">4.0-4.5英寸</a>
                    <a href="javascript:;">4.0英寸以下</a>
                </span>
            </li>
            <li>
                <span class="name">网络：</span>
                <span class="intro">
                    <a href="javascript:;">全网通</a>
                    <a href="javascript:;">双4G</a>
                    <a href="javascript:;">移动4G</a>
                    <a href="javascript:;">联通4G</a>
                    <a href="javascript:;">电信4G</a>
                </span>
            </li>
            <li><span class="name">核心数：</span><span class="intro">
                    <a href="javascript:;">十核</a>
                    <a href="javascript:;">八核</a>
                    <a href="javascript:;">双四核</a>
                    <a href="javascript:;">四核</a>
                    <a href="javascript:;">两核以下</a>
                </span></li>
            <li><span class="name">特性：</span><span class="intro">
                    <a href="javascript:;">大屏幕</a>
                    <a href="javascript:;">双卡双待</a>
                    <a href="javascript:;">指纹识别</a>
                    <a href="javascript:;">千元机</a>
                    <a href="javascript:;">拍照神器</a>
                </span>
            </li>
            <li class="choose">
                <span class="name">您已选择：</span>
                <span class="intro">
                    <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                </span>
            </li>
        </ul>
    </div>
</body>

</html>
<script>
    $('li .intro a').click(function () {
        // 给选中的a标签添加类名 未选中的移除类名
        $(this).addClass('selected').siblings().removeClass('selected')
        // 获取被选中的a标签所在行li的索引值
        var li_index = $(this).parents('li').index();
        // 获取选中的a标签的内容、
        var text = $(this).text() + '<em>&times;</em>';
        // 把对应行即li标签内的a标签的内容插入到对应的span标签内
        // 这样写可同时解决两个内容 修改选项可以同步 另外每个li对应一个span
        $('.choose .intro span').eq(li_index).html(text).css('display', 'inline-block');
        // 点击已选择的span关闭
        $('.choose .intro span').click(function(){
            var index = $(this).index();
            // 移除对应行的所有a标签的类名 
            //not:从匹配的元素集合中移除指定的元素(样式不赋值)
            $('li').not('.choose').eq(index).find('.intro a').removeClass('selected');
            $(this).empty().css('display', 'none');
            clearAll();
        });
        clearAll();
        function clearAll() {
            $('#clear').remove();
            // 获取已经选中的选项的个数（就是span标签不为空的个数）
            var length = $('.choose .intro span').not(':empty').length;
            console.log(length);
            if (length > 0) {
                // 当选择的个数大于0的时候出现清空
                var clear = '<a href="javascript:;" id="clear" class="clear">清空</a>'
                $('.choose .intro').append(clear);
                // 点击清空按钮清除所有选项及样式
                $('#clear').click(function(){
                    // 清空选项
                    $('.choose .intro span').html('').css('display','none');
                    // 清空所有a标签的样式
                    $('li').not('.choose').find('.intro a').removeClass('selected');
                    // 移除自身
                    $(this).remove();
                })
            }
        }

    })

</script>